<template>
  <ModelTile
    class="indicator"
    title="重要指标"
    @onMore="onMore"
    :is-download="false"
    :is-more="false"
  >
    <div class="indicator-item scrollbar">
      <ZTable :columns="columns" :data-source="investmentData" size="small" :pagination="false">
        <template #bodyCell="{ text }">
          {{ text }}
        </template>
      </ZTable>
    </div>
    <div class="indicator-item scrollbar">
      <ZTable :columns="columns2" :data-source="constructionData" size="small" :pagination="false">
        <template #bodyCell="{ text }">
          {{ text }}
        </template>
      </ZTable>
    </div>
    <div class="indicator-item scrollbar">
      <ZTable :columns="columns2" :data-source="salesData" size="small" :pagination="false">
        <template #bodyCell="{ text }">
          {{ text }}
        </template>
      </ZTable>
    </div>
  </ModelTile>
</template>

<script lang="ts">
import { ref, defineComponent, computed } from 'vue'
import ModelTile from '@/components/modleTitle/index.vue'
import ZTable from '@/components/z-table/index'
import { Column } from '@/interface/table'
import { useRouter } from 'vue-router'
export default defineComponent({
  name: 'sdly',
  components: {
    ModelTile,
    ZTable
  },
  props: {
    // 父级统计数据
    statAllData: {
      type: Object,
      default: {}
    }
  },
  setup(props) {
    const router = useRouter()

    // 表头
    const columns: Column[] = [
      {
        dataIndex: 'name',
        title: '投资指标',
        width: '20%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'completed',
        title: '实际完成投资',
        width: '15%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'yoy',
        title: '同比',
        width: '10%',
        ellipsis: true,
        align: 'left'
      }
    ]

    // 表头
    const columns2: Column[] = [
      {
        dataIndex: 'name',
        title: '投资指标',
        width: '20%',
        ellipsis: true,
        align: 'left'
      },
      {
        dataIndex: 'yoy',
        title: '同比',
        width: '10%',
        ellipsis: true,
        align: 'left'
      }
    ]
    const listData = computed(() => [
      { name: '土地购置费', completed: '20亿', yoy: '8%' },
      { name: '建安投资', completed: '20亿', yoy: '8%' },
      { name: '建设', completed: '20亿', yoy: '8%' }
    ])

    const listData2 = computed(() => [
      { name: '施工面积', yoy: '8%' },
      { name: '新开工面积', yoy: '8%' },
      { name: '竣工', yoy: '7%' }
    ])

    const listData3 = computed(() => [
      { name: '销售面积', yoy: '10%' },
      { name: '销售金额', yoy: '22%' }
    ])

    // 通过计算属性实时获取父级传递的 列表数据
    const investmentData = computed(
      () => props.statAllData?.realEstateData?.investmentData || listData.value
    )

    const constructionData = computed(
      () => props.statAllData?.realEstateData?.constructionData || listData2.value
    )

    const salesData = computed(
      () => props.statAllData?.realEstateData?.salesData || listData3.value
    )
    // 跳转页面
    function onMore() {
      console.log('跳转页面')
    }
    console.log('investmentData', investmentData)
    return {
      investmentData,
      constructionData,
      salesData,
      columns,
      columns2,
      onMore
    }
  }
})
</script>
<style lang="scss" scoped>
.indicator {
  height: 100%;
  color: #fff;

  :deep(.content) {
    width: 100%;
    height: auto;
    margin-top: 38vh * $Bh;
    background-color: initial;
    border-radius: 0;
    padding: 0;
  }

  .indicator-item {
    margin-top: 48vh * $Bh;
    &:first-child {
      margin-top: 0;
    }
    :deep(.z-table) {
      .ant-table {
        .ant-table-container {
          table {
            .ant-table-thead {
              .ant-table-cell {
                padding: 25vh * $h 0;

                &:first-child {
                  padding-left: 34vw * $w;
                }
              }
            }
          }

          .ant-table-thead {
            background: #213b76;
            height: 78vh * $Bh;
            tr {
              th {
                border-bottom: 2vh * $w solid #5492e4;
              }
            }
          }

          .ant-table-tbody {
            background: #0d1e4d;

            .ant-table-row {
              .ant-table-cell {
                &:first-child {
                  padding-left: 34vw * $w;
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
